<link rel="stylesheet" href="<?php echo base_url()?>asset/css/css-sidebar/sidebar.css" type="text/css" media="screen" />
<script type="text/javascript">
	function scrollToElement (selector) {
	  $('html, body').animate({
		scrollTop: $(selector).offset().top
	  }, 2000);   
	};

	$(document).on('click', 'a.scroll', function () {
		scrollToElement($(this).attr('href'));
	});
	
	$(document).on('click', 'a.menu_sidebar', function () {
		$('a.menu_sidebar').removeClass("aktif");
		$(this).addClass("aktif");
	});
</script>
<script type="text/javascript">
$('#myAffix').affix({
    offset: {
      top: 100, bottom: function () {
        return (this.bottom = $('.bs-footer').outerHeight(true))
      }
    }
  })
</script>
<script>  
	var width=screen.width;  
	var height=screen.height;  
</script> 

<div class="outer-nobg bs-sidebar" id="myAffix" data-spy="affix" data-offset-top="15" data-offset-bottom="230">
<h4 class="font-biru judul-singlepage hilang-mobile">Detail Project</h4>
<div class="outer-nobg hilang-mobile">
	<ul class="menu_simple">
	    <li id="btnDeskripsi"><a href="#spek_desk" class="scroll menu_sidebar"><span class="glyphicon glyphicon-file"></span>&nbsp;&nbsp;Deskripsi</a></li>
	    <li id="btnAlur"><a href="#spek_alur" class="scroll menu_sidebar"><span class="glyphicon glyphicon-random"></span>&nbsp;&nbsp;Alur</a></li>
	    <li id="btnFitur"><a href="#spek_fitur" class="scroll menu_sidebar"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;Fitur</a></li>
		<li id="btnSpek"><a href="#spek_hd" class="scroll menu_sidebar"><span class="glyphicon glyphicon-hdd"></span>&nbsp;&nbsp;Spesifikasi Hardware</a></li>
		<li id="btnClient"><a href="#spek_client" class="scroll menu_sidebar"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;Client</a></li>
		<li id="btnDemo"><a href="<?php echo $hasil['demo']?>" class="menu_sidebar" target="_blank"><span class="glyphicon glyphicon-globe"></span>&nbsp;&nbsp;Demo</a></li>
	  </ul>
<div class="clearfix"></div>
</div>


<h4 class="font-biru judul-singlepage">Our Portfolio</h4>
<div class="outer-nobg">
	<center><img src="<?php echo base_url();?>asset/images/news-arrow-previous.png" class="previous1" /></center>
	<div id="newsticker-demo">
     <ul>
		<?php
		if(isset($list_portofolio)){
		foreach($list_portofolio as $val){
			if($val['gambar']==""){
				$gambar="default.jpg";
			}else{
				$gambar=$val['gambar'];
			}
			$path_gambar=base_url()."foto_portofolio/thumbs/".$gambar;
		?>
       <li>
			<div class="news-sidebar">
				<div class="img-news-sidebar">
					<center>
						<img src="<?php echo $path_gambar;?>">
					</center>
				</div>
				<div class="kanan-img-news-sidebar">
					<h4><a href="<?php echo site_url('portofolio/'.$val['slug']);?>"><?php echo $val['judul']?></a></h4>
				</div>
			</div>
       </li>
	   <?php
		}
		}
		?>
     </ul>
 </div>
 <center><img src="<?php echo base_url();?>asset/images/news-arrow.png" class="next1" /></center>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>

<h4 class="font-biru judul-singlepage">Our Product</h4>
<div class="outer-nobg">
	<center><img src="<?php echo base_url();?>asset/images/news-arrow-previous.png" class="previous2" /></center>
	<div id="newsticker-demo2">
     <ul>
		<?php
		if(isset($list_produk)){
		foreach($list_produk as $val){
			if($val['gambar']==""){
				$gambar="default.jpg";
			}else{
				$gambar=$val['gambar'];
			}
			$path_gambar=base_url()."foto_portofolio/".$gambar;
		?>
       <li>
			<div class="news-sidebar">
				<div class="img-news-sidebar">
					<center>
						<img src="<?php echo $path_gambar;?>">
					</center>
				</div>
				<div class="kanan-img-news-sidebar">
					<h4><a href="<?php echo site_url('portofolio/'.$val['slug']);?>"><?php echo $val['judul']?></a></h4>
				</div>
			</div>
       </li>
	   <?php
		}
		}
		?>
     </ul>
 </div>
 <center><img src="<?php echo base_url();?>asset/images/news-arrow.png" class="next2" /></center>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div><!-- outer no-bg luar -->